<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <button id="refresh">点击刷新新闻</button>
    <div id="newsList"></div>
    <script>
        const refresh = document.querySelector("#refresh");
        const newsList = document.querySelector("#newsList");
        refresh.onclick = () => {
            fetch("http://ajax-api.itheima.net/api/news", {
                method: 'GET',
                headers: {
                    'content-type': "text/plain"
                },
                body: undefined
            })
                .then(res => res.json())
                .then(({ data }) => {
                    newsList.innerHTML = data
                        .map(
                            (el) => `
                                <div>
                                  <!-- 新闻封面 -->
                                  <img src="${el.img}"/>
                                  <h4>${el.title}</h4>
                                  <p>发布时间：${el.time} - 评论数：${el.cmtcount} - 来源：${el.source}</p>
                                </div>
                            `
                        )
                        .join("\n");
                })
        }

        // refresh.onclick = () => {
        //     fetch("http://ajax-api.itheima.net/api/news", {
        //         method: 'GET',
        //         headers: {
        //             'content-type': 'text/plain'
        //         },
        //         body: undefined
        //     })
        //         .then(res => res.json())
        //         .then(({ data }) => {
        //             newsList.innerHTML = data
        //                 .map(
        //                     (el) => `
        //                             <div>
        //                               <!-- 新闻封面 -->
        //                               <img src="${el.img}"/>
        //                               <h4>${el.title}</h4>
        //                               <p>发布时间：${el.time} - 评论数：${el.cmtcount} - 来源：${el.source}</p>
        //                             </div>
        //                     `
        //                 )
        //                 .join("\n");
        //         })
        // }
        // refresh.onclick = () => {
        //     fetch("http://ajax-api.itheima.net/api/news")
        //         .then(res => res.json())
        //         .then(({ data }) => {
        //             newsList.innerHTML = data
        //                 .map(
        //                     (el) => `
        //                         <div>
        //                           <!-- 新闻封面 -->
        //                           <img src="${el.img}"/>
        //                           <h4>${el.title}</h4>
        //                           <p>发布时间：${el.time} - 评论数：${el.cmtcount} - 来源：${el.source}</p>
        //                         </div>
        //                     `
        //                 )
        //                 .join("");
        //         })
        // }
    </script>
</body>

</html>